<!--
 * @Author: Zcl84765
 * @Date: 2022-11-16 14:24:55
 * @LastEditors: Zcl84765
 * @LastEditTime: 2022-11-17 09:45:06
-->
<template>
  <div>
    <diV>
      <div v-color="color">123</div>
      <div v-color1="color1">456</div>
      <div v-for="(item, idx) in list" :key="idx">
        <span v-delete="item">{{ item.name }}</span>
      </div>
    </diV>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "pink",
      color1: "skyblue",
      list: [{ name: "zx" }, { name: "ls" }]
    };
  },
  directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value;
      },
      update() {}
    }
  }
};
</script>

<style></style>
